<!DOCTYPE html>
<html class="">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-提交评价</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="">
<div class="register-bar collect-bar" style="padding-bottom: 50px;">
    <div class="header-box pos-fix" style="z-index: 1000;">
        <div class="header-goBack">
            <a class="go-back-btn sprite-icon" id="forgetGoBack" href="#"></a>
        </div>
        提交评价
        <div class="header-more-btn settingMenu"><span class="has-icon sprite-icon"></span></div>
    </div>

    <div class="setting-menu pos-fix" style="left: auto;">
        <span class="arrow-top"></span>
        <a href="#"><i class="sprite-icon index-icon"></i>首页</a>
        <a href="#"><i class="sprite-icon shop-icon"></i>商品分类</a>
        <a href="#"><i class="sprite-icon car-icon"></i>购物车<span>10</span></a>
        <a href="#"><i class="sprite-icon goods-icon"></i>实物订单</a>
        <a href="#"><i class="sprite-icon mine-icon"></i>我的</a>
    </div>
    <div class="collect-cont">
        <div class="refund-box orderIntro-box pad-b10">
            <div class="collect-list shopCar-list order-page-list padding-10 no-padding">
                <ul>
                    <li>
                        <div class="collect-intro">
                            <a href="#234">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                </label>

                                <div class="collect-intro-text">
                                    <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                        压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                    <p class="collect-price" data-price="148.00">￥148.00元</p>

                                    <div class="number-box pos-abs-br num-text">x2</div>
                                </div>
                            </a>
                        </div>
                        <div class="evaluate-score evaluate-score-big mar-t5">
                            <label class="score clearfix">
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                            </label>
                            <span class="score-text"></span>
                        </div>
                        <div class="evaluate-content mar-b10">
                            <label class="evaluate-text">
                                <textarea cols="" rows="" placeholder="好评！"></textarea>
                            </label>
                        </div>
                        <div class="evaluate-img has-close list-row none-space mar-b10">
                            <ul class="clearfix imgBasicCls">
                                <li class="upload-box">
                                    <input class="upload-img" type="file" value="上传图片" readonly>
                                    <span class="upload-text">添加图片</span>
                                    <img src="img/upload-imgBtn.png">
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="collect-intro">
                            <a href="#234">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                </label>

                                <div class="collect-intro-text">
                                    <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                        压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                    <p class="collect-price" data-price="148.00">￥148.00元</p>

                                    <div class="number-box pos-abs-br num-text">x2</div>
                                </div>
                            </a>
                        </div>
                        <div class="evaluate-score evaluate-score-big mar-t5">
                            <label class="score clearfix">
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                            </label>
                            <span class="score-text"></span>
                        </div>
                        <div class="evaluate-content mar-b10">
                            <label class="evaluate-text">
                                <textarea cols="" rows="" placeholder="好评！"></textarea>
                            </label>
                        </div>
                        <div class="evaluate-img has-close list-row none-space mar-b10">
                            <ul class="clearfix imgBasicCls">
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/limit-img3.jpg">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <input class="upload-img" type="file" value="上传图片" readonly>
                                    <span class="upload-text">1/4</span>
                                    <img src="img/upload-imgBtn.png">
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="collect-intro">
                            <a href="#234">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                </label>

                                <div class="collect-intro-text">
                                    <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                        压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                    <p class="collect-price" data-price="148.00">￥148.00元</p>

                                    <div class="number-box pos-abs-br num-text">x2</div>
                                </div>
                            </a>
                        </div>
                        <div class="evaluate-score evaluate-score-big mar-t5">
                            <label class="score clearfix">
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                            </label>
                            <span class="score-text"></span>
                        </div>
                        <div class="evaluate-content mar-b10">
                            <label class="evaluate-text">
                                <textarea cols="" rows="" placeholder="好评！"></textarea>
                            </label>
                        </div>
                        <div class="evaluate-img has-close list-row none-space mar-b10">
                            <ul class="clearfix imgBasicCls">
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/limit-img3.jpg">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/add-none.png">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <input class="upload-img" type="file" value="上传图片" readonly>
                                    <span class="upload-text">2/4</span>
                                    <img src="img/upload-imgBtn.png">
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="collect-intro">
                            <a href="#234">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                </label>

                                <div class="collect-intro-text">
                                    <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                        压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                    <p class="collect-price" data-price="148.00">￥148.00元</p>

                                    <div class="number-box pos-abs-br num-text">x2</div>
                                </div>
                            </a>
                        </div>
                        <div class="evaluate-score evaluate-score-big mar-t5">
                            <label class="score clearfix">
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                                <i class=""></i>
                            </label>
                            <span class="score-text"></span>
                        </div>
                        <div class="evaluate-content mar-b10">
                            <label class="evaluate-text">
                                <textarea cols="" rows="" placeholder="好评！"></textarea>
                            </label>
                        </div>
                        <div class="evaluate-img has-close list-row none-space mar-b10">
                            <ul class="clearfix imgBasicCls">
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/limit-img3.jpg">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/add-none.png">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <a href="javascript:;">
                                        <img class="lazy" src="img/recommend-title.png">
                                    </a>
                                    <i class="sprite-icon close-icon"></i>
                                </li>
                                <li class="upload-box">
                                    <input class="upload-img" type="file" value="上传图片" readonly>
                                    <span class="upload-text">3/4</span>
                                    <img src="img/upload-imgBtn.png">
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="evaluate-sub-btn pos-fix"><a href="javascript:;">提交评价</a></div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        function verdictModel() {
            var type = "";
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                type = "IOS";
            } else if (/(Android)/i.test(navigator.userAgent)) {
                type = "Android";
            } else {
                type = "PC";
            }
            return type;
        }

        //设置图片的大小
        $(window).resize(function () {
            var w_w = $(this).width() - 20 - 39;
            var cell_w = w_w / 4;
            $(".evaluate-img").find("li.upload-box,a").css({"width": cell_w + "px", "height": cell_w + "px"});
        }).trigger("resize");
        //显示菜单
        $(".settingMenu").click(function () {
            $(".setting-menu").fadeToggle();
            $(this).toggleClass("active")
        });

        //图片上传完成之后执行。
        $("img.lazy").each(function () {
            publicFuns.countProductImg(this, true);
        });

        //评分
        var handle = verdictModel() == "IOS" ? "touchend click" : "click";
        $(document).on(handle, ".evaluate-score i", function (e) {
            e.preventDefault();
            var j = $(this).index();
            var text = "";
            switch (j) {
                case 0:
                    text = "非常不满";
                    break;
                case 1:
                    text = "不满";
                    break;
                case 2:
                    text = "一般";
                    break;
                case 3:
                    text = "满意";
                    break;
                case 4:
                    text = "非常满意";
                    break;
            }
            $(this).parents(".evaluate-score").find("i").removeClass("active").each(function (i) {
                if (i <= j) {
                    $(this).addClass("active");
                }
            });
            $(this).parents(".evaluate-score").find(".score-text").css({"top": "20px", "opacity": 0}).animate({
                "top": "0",
                "opacity": 1
            }, 500).text(text);
        });

        //删除上传图片
        $(document).on(handle, ".close-icon", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var _this = $(this);
            _this.parents("li.upload-box").fadeOut(function () {
                $(this).remove();
            });
        });

        //屏蔽一些放大
        document.addEventListener("dblclick", function (e) {
            e.preventDefault();
        });
        document.addEventListener("touchmove", function (e) {
            console.log(e.touches.length);
            if (e.touches.length >= 2) {
                e.preventDefault();
            }
        });
    });
</script>
</body>
</html>